<template>
	<view style="height: 100%">
		<view class="" v-if="!info_show">
			<ul class="db bgcf pd015">
				<li class="df ac sb h48 bbf1">
					<span class="f14 cf5">*</span>
					<p class="f14 c28">企业名称</p>
					<input class="tr f1 ml15 f14 c28" @input="onInput" :data-type="0" :value="val[0]"
						placeholder="名称与营业执照一致" placeholder-class="cc" />
				</li>
				<li class="df ac sb bgcf pd150 bbf1">
					<view class="">
						<view class="df ac bgcf" hover-class="none" :hover-stop-propagation="false">
							<span class="f14 cf5">*</span>
							<p class="f14 c28">营业执照</p>
						</view>
						<view class="tips cc">
							清晰完整，避免缺边、模糊、反光
						</view>
					</view>

					<view class="df ac">
						<view class="mr12 img72 pr" v-if="val[1]">
							<image class="img72" referrerPolicy='no-referrer' :src="img_path + val[1]" />
							<image class="img-del" src="https://wx.xtwaixie.com/img/del.png" @tap="onDel" />
						</view>
						<image class="img72" src="https://wx.xtwaixie.com/img/up.png" @tap="upImgArr" />
					</view>
				</li>
				<li class="df ac sb h48 bbf1">
					<span class="f14 cf5">*</span>
					<p class="f14 c28">负责人</p>
					<input class="tr f1 ml15 f14 c28" @input="onInput" :data-type="2" :value="val[2]"
						placeholder="请填写负责人" placeholder-class="cc" />
				</li>
				<li class="df ac sb h48 bbf1">
					<span class="f14 cf5">*</span>
					<p class="f14 c28">联系方式</p>
					<input class="tr f1 ml15 f14 c28" :data-type="3" @input="onInput" :value="val[3]"  type="number"
						placeholder="请填写联系方式" placeholder-class="cc" />
				</li>
				<li class="df ac sb h48 bbf1" @tap.native="onArea($event, { type: 0 })" :data-type="0">
					<span class="f14 cf5">*</span>
					<p class="f14 c28">地区</p>
					<input class="tr f1 ml15 f14 c28" :value="area[0] + area[1]" placeholder="请选择"
						placeholder-class="cc" disabled />
					<image class="img14 ml8" src="https://wx.xtwaixie.com/img/more1.png" />
				</li>
				<li class="df ac sb h48 bbf1">
					<span class="f14 cf5">*</span>
					<p class="f14 c28">详细地址</p>
					<input class="tr f1 ml15 f14 c28" @input="onInput" :data-type="4" :value="val[4]"
						placeholder="请填写地址" placeholder-class="cc" />
				</li>
				<!-- <li class='df ac sb h48 bbf1' bindtap='onArea' data-type='{{1}}'>
		<span class='f14 cf5'>*</span>
		<p class='f14 c28'>加工类型</p>
		<input class="tr f1 ml15 f14 c28" value="{{material_val}}" placeholder="请选择" placeholder-class="cc"
			disabled></input>
		<image class="img14 ml8" src="../../img/more1.png" />
	</li> -->
				<!-- <li class='df ac sb h48 bbf1' bindtap='onArea' data-type='{{2}}'> -->
				<li class="df ac sb h48 bbf1">
					<span class="f14 cf5">*</span>
					<p class="f14 c28">加工类型</p>
					<input class="tr f1 ml15 f14 c28" placeholder="请填写加工类型" placeholder-class="cc" @input="onInput"
						:data-type="5" :value="val[5]" />
					<!-- <input class="tr f1 ml15 f14 c28" value="{{type_val}}" placeholder="请选择" placeholder-class="cc" disabled></input>
		<image class="img14 ml8" src="../../img/more1.png" /> -->
				</li>
				<block v-for="(item, index) in device" :key="index">
					<li class="df ac sb h48 bbf1">
						<p class="f14 c28">加工设备{{ index + 1 }}</p>
						<input class="tr f1 ml15 f14 c28" placeholder="请填写加工设备" placeholder-class="cc" @input="onDevice"
							:data-type="index" :value="device[index]" />
					</li>
				</block>
				<li class="df pt15">
					<view class="add-sb" @tap="onAdd">添加设备</view>
				</li>
			</ul>
			<view class="pd15 mt15" hover-class="none" :hover-stop-propagation="false">
				<button class="sub" @tap="onSub">提交</button>
			</view>
			<van-popup :show="show_list[0]" round @close="onClose" position="bottom">
				<van-area :area-list="areaList" @confirm="confirm" @cancel="onClose" columns-num="2" />
			</van-popup>
			<van-popup :show="show_list[1]" round @close="onClose" position="bottom">
				<van-picker :columns="bese_info.machining" show-toolbar @confirm="confirm" value-key="name"
					@cancel="onClose" />
			</van-popup>
			<van-popup :show="show_list[2]" round @close="onClose" position="bottom">
				<van-picker :columns="bese_info.range" show-toolbar @confirm="confirm" value-key="name"
					@cancel="onClose" />
			</van-popup>
		</view>
		<!-- 提交过 -->
		<view class="pd15" v-else>
			<view class="pd015 bgcff7 br12">
				<view class="df ac sb pd150 bbf1">
					<p class="f14 c9d">申请时间：{{ info.created_at }}</p>
					<p class="f14 f500 c10" v-if="info.status == 1">审核中</p>
					<p class="f14 f500 cf5" v-if="info.status == 3">未通过</p>
					<p class="f14 f500 c3a" v-if="info.status == 2">已通过</p>
				</view>
				<view class="pd150">
					<h2 class="c28 f18 f600 db">{{ info.company }}</h2>
					<view class="df ac sb">
						<ul class="db f1">
							<li class="db f14 c9d mt5">地区：{{ info.city }}</li>
							<li class="db f14 c9d mt5">负责人：{{ info.person }}</li>
							<!-- <li class="db f14 c9d mt5">地加工范围：{{ info.range_id }}</li> -->
						</ul>
						<image class="img72 br6" @tap.stop.prevent="preview" referrerPolicy='no-referrer'
							:src="info.business_license_show" :data-src="info.business_license_show"></image>
					</view>
				</view>
				<view class="bh mt12" v-if="info.reason">原因：{{ info.reason }}</view>
			</view>
			<view class="pob pd715 mb20">
				<button class="sub" v-if="info.status != 2" @tap="onAgain">重新提交</button>
				<button class="sub" v-else @tap="onBack">返回</button>
			</view>
		</view>
		<van-popup :show="showNotice" @close="onClose" custom-style='background:#00000000;'>
			<image src="https://cdn.xtwaixie.com/uploads/20240415/1713170369661ce7c10e9d1.gif" mode="widthFix" style="width: 500rpx;padding-bottom: 600rpx;"></image>
		</van-popup>
	</view>
</template>

<script>
	import areaList from '../../utils/area';
	const http = require('../../utils/http');
	export default {
		data() {
			return {
				show_list: [false, false, false],
				areaList: areaList.areaList,
				area: ['', ''],
				type_val: '',
				type_id: '',
				material: '',
				material_id: '',
				val: ['', '', '', '', '', ''],
				act: '',
				img_path: '',
				device: [],
				info: {
					created_at: '',
					status: 0,
					company: '',
					city: '',
					person: '',
					range_id: '',
					business_license_show: '',
					reason: ''
				},

				info_show: false,
				material_val: '',

				bese_info: {
					machining: '',
					range: ''
				},
				showNotice: false
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad(options) {
			this.setData({
				area: uni.getStorageSync('top_area') || ['', ''],
				img_path: http.img_path
			});
			let token = uni.getStorageSync('token');
			if (token) {
				this.getInfo();
			} else {
				let is_login = uni.getStorageSync('is_login');
				if (!is_login) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}

			}
			this.getBase();
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			let is_login = uni.getStorageSync('is_login');
			if (is_login) {
				this.getBase();
			}
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {},
		methods: {
			onClose() {
				this.showNotice = false
			},
			// 添加设备
			onAdd() {
				this.device.push('');
				this.setData({
					device: this.device
				});
			},

			onDevice(e) {
				let val = e.detail.value;
				let i = e.currentTarget.dataset.type;
				this.setData({
					[`device[${i}]`]: val
				});
			},

			// 提交
			onSub() {
				if (!this.val[0]) {
					uni.showToast({
						title: '请输入企业名称',
						icon: 'none'
					});
					return false;
				}
				if (!this.val[1]) {
					uni.showToast({
						title: '请上传营业执照',
						icon: 'none'
					});
					return false;
				}
				if (!this.val[5]) {
					uni.showToast({
						title: '请填写加工类型',
						icon: 'none'
					});
					return false;
				}
				if (!this.val[2]) {
					uni.showToast({
						title: '请输入负责人',
						icon: 'none'
					});
					return false;
				}
				if (!this.val[3]) {
					uni.showToast({
						title: '请输入联系方式',
						icon: 'none'
					});
					return false;
				}
				let phoneReg = /^1\d{10}$/;
				if (!phoneReg.test(this.val[3])) {
					uni.showToast({
						title: '填写手机号位数不对',
						icon: 'none'
					})
					return
				}
				let ifFirstPopup = uni.getStorageSync('ifFirstPopup')
				if (!ifFirstPopup) {
					this.showNotice = true
					uni.setStorageSync('ifFirstPopup', true)
				}
				
				const self = this
				uni.requestSubscribeMessage({
					tmplIds: ['92OIalTSykZRY_WjSV0KahZNSwxMLTE4RhnC3lzAIgw'],
					complete() {
						self.submit()
						self.showNotice = false
					}
				})
			},
			submit() {
				let data = {
					company: this.val[0],
					business_license: this.val[1],
					province: this.area[0],
					city: this.area[1],
					machining_id: this.machining_id,
					range_id: this.val[5],
					person: this.val[2],
					mobile: this.val[3],
					address: this.val[4],
					device: this.device.toString()
				};
				http.request('user/settled', data)
					.then((res) => {
						uni.reLaunch({
							url: '/subPack/editSuccess/editSuccess'
						});
					})
					.catch((res) => {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					});
			},

			// 弹框显示
			onArea(e, _dataset) {
				/* ---处理dataset begin--- */
				this.handleDataset(e, _dataset);
				/* ---处理dataset end--- */
				let i = e.currentTarget.dataset.type;
				let status = this.show_list[i];
				this.setData({
					[`show_list[${i}]`]: !status,
					act: i
				});
			},

			//  弹框关闭
			onClose() {
				this.setData({
					show_list: [false, false, false]
				});
			},

			//  弹框确认点击
			confirm(e) {
				let act = this.act;
				switch (act) {
					case 0:
						this.setData({
							[`area[0]`]: e.detail.values[0].name,
							[`area[1]`]: e.detail.values[1].name
							// [`area[2]`]: e.detail.values[2].name,
						});

						this.onClose();
						break;
					case 1:
						this.setData({
							material_val: e.detail.value.name,
							material_id: e.detail.value.id
						});
						this.onClose();
						break;
					case 2:
						this.setData({
							type_val: e.detail.value.name,
							type_id: e.detail.value.id
						});
						this.onClose();
						break;
				}
			},

			// input显示
			onInput(e) {
				let val = e.detail.value;
				let i = e.currentTarget.dataset.type;
				this.setData({
					[`val[${i}]`]: val
				});
			},

			// 获取配置
			getBase() {
				http.request('base/configData')
					.then((res) => {
						this.setData({
							bese_info: res.data
						});
					})
					.catch((res) => {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					});
			},

			//  上传照片
			upImgArr() {
				let that = this;
				uni.chooseImage({
					count: '1',
					sizeType: 'compressed',
					success(res) {
						http.upLoadFile('base/uploadImg', 'image', res.tempFilePaths[0], {})
							.then((res) => {
								that.setData({
									[`val[1]`]: res.data.url
								});
							})
							.catch((res) => {
								uni.showToast({
									title: res.message,
									icon: 'none'
								});
							});
					},
					fail() {}
				});
			},

			// 删除图片
			onDel(e) {
				this.setData({
					[`val[1]`]: ''
				});
			},

			// 预览
			preview(event) {
				let currentUrl = event.target.dataset.src;
				uni.previewImage({
					current: currentUrl,
					// 当前显示图片的http链接
					urls: [currentUrl] // 需要预览的图片http链接列表
				});
			},

			getInfo() {
				http.request('user/settledInfo')
					.then((res) => {
						if (res.data.info.company) {
							this.setData({
								info_show: true,
								[`val[0]`]: res.data.info.company,
								[`val[1]`]: res.data.info.business_license,
								[`val[2]`]: res.data.info.person,
								[`val[3]`]: res.data.info.mobile,
								[`val[4]`]: res.data.info.address,
								[`val[5]`]: res.data.info.range_id,
								device: res.data.info.device || []
							});
						}
						this.setData({
							info: res.data.info
						});
					})
					.catch((res) => {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					});
			},

			onAgain() {
				this.setData({
					info_show: false
				});
			},

			// 返回
			onBack() {
				uni.switchTab({
					url: "/pages/my/my"
				})
			}
		}
	};
</script>
<style>
	@import './settled.css';

	.tips {
		margin-top: 4rpx;
		font-size: 28rpx;
	}
</style>